<template>
  <div class="toptitle">
    <van-nav-bar :title="title"  @click-left="onClickLeft" @click-right="onClickRight">
      <template #left>
        <div class="letfimg" @click="gotoHome">
          <img src="../../../assets/images/hjj-image/箭头.png" alt="" />
        </div>
      </template>
      <template #right>
        <div class="rightimg" @click="gotoSserch">
          <img src="../../../assets/images/hjj-image/搜素.png" alt="" />
        </div>
      </template>
    </van-nav-bar>
  </div>
</template>
<script>
export default {
  props:{
    title:{
      type: String,
      default: "护肤榜",
    }
  },
  methods: {
    onClickLeft() {
      //跳转到首页
      this.$router.push("/home");
    },
    onClickRight() {
      //跳转到搜索页
      this.$router.push("/search");
    },
  },
}
</script>
<style lang="less" scoped>
// 头部标题
.toptitle {
  width: 100%;
  height: 50px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 998;
}
:deep(.van-nav-bar__title) {
  font-weight: 900;
}
.letfimg img {
  width: 11px;
  height: 18px;
}
.rightimg img {
  width: 23px;
  height: 22px;
}
</style>